<template>
        <input
         v-model="formatValue"
         class="form-inp"
         type="text"
         >
</template>

<script>
const formatFn = {
    phone: val => {
        let newValue = val.substr(0,11)
        let reg = /(\d{1,}),{\d{4}}/;
        while (reg.test(newValue)) {
            newValue = newValue.replace(reg, "$1 $2")
        }
        return newValue;
    },
    idCard: val => {
        let newValue = val;
        let reg = /(\d{1,})(\d{4})/;
        while (reg.test(newValue)) {
            newValue = newValue.replace(reg,"$1 $2");
        }
        return newValue
    },
    bankNo: val => {},
    money: val => {}
};
const clearFormat = val => {
    console.log(val.replace(/\s+/g, ""));
    return val.replace(/\s+/g, "")
}
    export default {
        name:'InputText',
        props:{
            type:{
                type:String,
                default:"text"
            }
        },
        data() {
            return {
                val: ""
            }
        },
        watch: {
            val(newValue) {
                this.$emit('input', newValue)
            }
        },
        computed: {
            formatValue: {
                get() {
                    const updateFn = formatFn[this.type];
                    return updateFn ? updateFn(this.val) : this.val;
                },
                set(newValue) {
                    this.val = clearFormat(newValue, this.type);
                }
            }
        },
    }
</script>

<style lang="scss" scoped>
.form-inp {
    width: 100%;
    height: 100%;
    background: transparent;
    border: 0;
    outline: none;
    line-height: 100px;
    padding: 0 20px;
    box-sizing: border-box;
}
</style>